{include file="Public:header" /}
    
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>菜单列表</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="">
                            <a onclick="removeParent()" class="btn btn-primary" aria-controls="messages" role="button" data-toggle="modal" data-target="#myModal"><span class="fa fa-plus"></span> 添加一级菜单</a>
                        </div>
                        <br/>
                      <form action="__URL__/updateSort" method="post">
                        <div class="table-responsive">
					          <table class="table table-bordered table-hover">
						        <thead>
						          <tr style="background: #f9f9f9;">
						            <th width="200" height="40">排序</th>
						            <th>菜单名</th>
						            <th>链接</th>
						            <th width="200">是否显示</th>
						            <th>操作</th>
						          </tr>
						        </thead>
						        <tbody>
						          {foreach name="data" item="data"}
						            <tr class="gradeX">
						                <td><input style="width:50px;" type="number" name="{$data['id']}" value="{$data['order_number']}" /></td>
						                <td style="text-align:left;">{$data['_name']}</td>
						                <td>{$data['mca']}</td>
                                        <td style="padding: 0px;width: 200px;">
                                            <div class="col-sm-6" style="margin-left:-15px;width:150px;float: left;">
                                                <select class="form-control" onchange="updateShowStatus({$data['id']}, this.options[this.options.selectedIndex].value)">
                                                    <option {if condition="$data['is_display'] eq 1"} selected {/if} value="1">显示</option>
                                                    <option {if condition="$data['is_display'] eq 0"} selected {/if} value="0">不显示</option>
                                                </select>
                                            </div>
                                        </td>
						                <td class="center">
					                         <div class="dropdown">
								                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 操作   <span class="caret"></span></button>
								                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
								                  <li><a role="button" class="btn btn-primary" style="margin-bottom: 0px;" onclick="addParent({$data['id']})" data-toggle="modal" data-target="#myModal" href="#"><span class="fa fa-plus"></span> 添加子菜单</a></li>
								                  <li><a role="button" class="btn btn-primary" style="margin-bottom: 0px;" menu_id="{$data['id']}" menu_name="{$data['name']}" mca="{$data['mca']}" ico="{$data['ico']}" onclick="edit(this)"><span class="fa fa-edit"></span> 修改</a></li>
								                  <li><a role="button" class="btn btn-danger" style="margin-bottom: 0px;" onclick="deleteMenu(this,{$data['id']})" href="#"><span class="fa fa-trash-o"></span> 删除</a></li>
								                </ul>
								              </div>
						                </td>
						            </tr>
						           {/foreach}
						           <tr>
						           	<td><button type="submit" class="btn btn-primary">排序</button></td>
						           </tr>
						        </tbody>
					     	 </table>
     					 </div>
     					</form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">添加菜单</h4>
      </div>
      <div class="modal-body">
         <!-- class都是bootstrap定义好的样式，验证是根据input中的name值 -->
        <form action="__URL__/addMenu" method="post" id="defaultForm">
          <div class="form-group">
            <label for="exampleInputMenuName">输入菜单名</label>
            <input type="text" style="border-radius: 4px;" class="form-control" id="exampleInputMenuName" name="menu_name" placeholder="菜单名">
          </div>
          
          <div class="form-group" id="two_input">
            <label for="exampleInputLink">输入控制器/方法即可 例如 Nav/index</label>
            <input type="text" style="border-radius: 4px;" class="form-control" id="exampleInputLink" name="link" placeholder="链接">
          </div>
          
          <div class="form-group" style="display: none;">
            <label for="exampleInputIco">font-awesome图标 输入fa fa-navicon 即可</label>
            <input type="text" style="border-radius: 4px;"  class="form-control" id="exampleInputIco" name="ico" placeholder="ico图标" value="fa fa-navicon">
          </div>
          
	      <div class="modal-footer" id="parent_id">
	        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
	        <button type="submit"  class="btn btn-primary">提交</button>
	      </div>
	      </form>
      </div>
    </div>
  </div>
</div>
<!-- Modal -->
{include file="Public:footer" /}
   
<script>
$(document).ready(function() {
    /**
     * 下面是进行插件初始化
     * 你只需传入相应的键值对
     * */
    $('#defaultForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {/*输入框不同状态，显示图片的样式*/
            	  valid: 'glyphicon glyphicon-ok',
                  invalid: 'glyphicon glyphicon-remove',
                  validating: 'glyphicon glyphicon-refresh'
            },
            fields: {/*验证*/
            	menu_name: {/*键名username和input name值对应*/
                    message: '菜单名验证失败',
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '菜单名不能为空'
                        },
                        stringLength: {/*长度提示*/
                            min: 4,
                            max: 20,
                            message: '菜单名长度必须在4到20之间'
                        }/*最后一个没有逗号*/
                    }
                },
                link: {
                    message:'链接无效',
                    validators: {
                        notEmpty: {
                            message: '链接不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: '链接长度必须在4到30之间'
                        }
                    }
                },
            }
        });
});

//添加一级菜单，删除父亲input
function removeParent(){
	$("input[name='parent_id']").remove();
	$("#two_input").hide();
}

//添加子菜单
function addParent(parent_id){
	$("input[name='parent_id']").remove();//先删除避免存入错误的父级ID
	$("#two_input").show();
	$("#parent_id").append("<input type='hidden' name='parent_id' value='"+parent_id+"'/>"); //append内部追加、after外部追加
}

//修改菜单
function edit(obj){
	var id=$(obj).attr('menu_id');
	var menu_name = $(obj).attr('menu_name');
	var mca = $(obj).attr('mca');
	var ico = $(obj).attr('ico');
	$('#myModal').modal('show');
	$("#defaultForm").attr('action','__URL__/editMenu?id='+id);
	if(mca == '')
	{
		$("#two_input").hide();
	}else{
		$("#two_input").show();
	}
	$("input[name='menu_name']").val(menu_name);
	$("input[name='link']").val(mca);
	$("input[name='ico']").val(ico);
}

//删除
function deleteMenu(obj,id){
	layer.confirm('确定要删除数据吗',{btn:['确认','取消'], icon:3, closeBtn: 2 },function(index){
		$.ajax({
			url : '__URL__/deleteMenu',
			data : {'id':id},
			type : 'get',
			dataType : 'json',
			async : false,   //取消同步，执行完之后再往下执行
			success : function(data){
				if(data.status == 1){				
					layer.msg(''+data.message+'',{icon:2,time:1000});
				}else if(data.status == 2){
					layer.msg(''+data.message+'',{icon:1,time:1000});
					$(obj).parent('li').parent('ul').parent('div').parent('td').parent('tr').remove();
				}else if(data.status == 3){
					layer.msg(''+data.message+'',{icon:2,time:1000});
				} 
			}
		});
	});
}

function updateShowStatus(menuId, status) {
    $.ajax({
        url : "__URL__/statusEdit",
        type : "GET",
        dataType : "JSON",
        data : {
            menuId : menuId,
            status : status,
        },
        success : function(data) {
            if(data.status == 1) {
                layer.msg('操作成功',{time:2000});
            } else {
                layer.msg('操作失败',{time:2000});
            }
        }
    });
}
</script>
</body>
</html>
